$(function() {
    $(".login1 ul li").click(function() {
            $(this).addClass("active").siblings().removeClass("active");
            //获取index
            var index = $(this).index();
            console.log(index)
                //把标题相应内容盒子显出来
            $(".login1 .loginType1").hide()
            if (index == 0) {
                $(".login1 .loginType").hide().eq(index).show();

                $("#qrImg").stop(true, false).animate({ "left": "25px" }, 500, function() {
                    $("#phoneImg").stop(true, false).animate({ "opacity": "1" }, 300)
                })
                setTimeout(function() {
                    $("#phoneImg").stop(true, false).animate({ "opacity": "0" }, 300, function() {
                        $("#qrImg").stop(true, false).animate({ "left": "100px" }, 500)
                    })
                }, 3000)
            } else {
                $(".login1 .loginType1").show()

                //点击账户登录
                $(".login1 .loginType").hide().eq(index).show();
                //回到初态
                $("#phoneImg").stop(true, false).animate({ "opacity": "0" }, 300, function() {
                    $("#qrImg").stop(true, false).animate({ "left": "100px" }, 500)
                })
            }

        })
        // 鼠标指针移上qrphone盒子里
    $("#qrphone").hover(function() {
            $("#qrImg").stop(true, false).animate({ "left": "25px" }, 500, function() {
                $("#phoneImg").stop(true, false).animate({ "opacity": "1" }, 300)
            })
        }, function() {
            $("#phoneImg").stop(true, false).animate({ "opacity": "0" }, 300, function() {
                $("#qrImg").stop(true, false).animate({ "left": "100px" }, 500)
            })
        })
        //账号登录点击×号
        //规定账号规则
    var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
    var reg2 = /^[a-zA-Z0-9]{4,10}$/;
    var flag = true;
    var flag2 = true;
    $(".loginType1 .pUser>span").on('click', function() {
        if ($('#user').prop("value") != '') {

            $('#user').prop("value", '请输入');
        }

    })
    $('#user').focus(function() {
        if (flag) {
            alert('用户名由英文字母和数字组成的4-16位字符，以字母开头')
            flag = false
        }
        $('#user').prop("value", '');

    });
    $('#user').blur(function() {
        if ($('#user').prop("value") == '') {

            $('#user').prop("value", '请输入4~16位账号');
        }

    });
    $('#pwd').focus(function() {
        if (flag2) {
            alert('密码由英文字母和数字组成的4-10位字符')
            flag2 = false
        }
        var user = $('#user').prop("value")
        if (reg.test(user) == false) {
            alert('亲爱的，账号格式不正确哟，请重新输入哟。')
        } else {
            $('#pwd').prop("value", '');
        }
    });
    $('#sub').click(function() {
        var user2 = $('#pwd').prop("value")

        if ($('#pwd').prop("value") == '') {
            alert('亲爱的，输入密码才能登陆哟！')
        } else if ($('#user').prop("value") == 'login123' && $('#pwd').prop("value") == 'zyf12345') {
            alert('亲爱的，登陆成功')
            window.location.href = 'homePage.html'
        } else {
            alert('亲爱的，密码或账号不正确，请重新输入哟')
        }


    });

    // function $(elementId) {
    //     return document.getElementById(elementId).value;
    // }

    // function divId(elementId) {
    //     return document.getElementById(elementId);
    // }
    // /*用户名验证*/
    // function checkUser() {
    //     var user = $("user");
    //     var userId = divId("user_prompt");
    //     userId.innerHTML = "";
    //     var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
    //     if (reg.test(user) == false) {
    //         userId.innerHTML = "用户名不正确";
    //         return false;
    //     }
    //     return true;
    // }
    //账号登录 end
})